import Vue from "vue";
import Vuex from "vuex";

// Vuex 是 Vue 的插件。Vue的插件要想使用，必须通过use方法使用
Vue.use(Vuex); // 安装插件 应用插件

// 集中式管理数据的仓库
const store = new Vuex.Store({
  // 管理数据的容器
  state:{
    count: 0,
  },
  getters:{
    oddOrEven(state){
      return state.count % 2 === 1 ? "奇数" : "偶数";
    },
  },
  // 更新数据第一个流程：发送请求（和服务器进行交互）
  actions:{
    /*  触发mutation函数 ->调用commit方法 
     store.com mit("mutations函数名称")*/
    // 加
    increment({ commit },val){
      commit("INCREMENT",val);
    },
    
    // 减
    decrement({ commit },val){
      commit("DECREMENT",val);
    },
    // 奇数加
    ifoddincrement({ commit,state },val){
      if(state.count % 2 === 1){
        commit("INCREMENT",val);
      }
    },
    incrementAsync({ commit },val){
      setInterval(() => {
        commit("INCREMENT",val);
      }, 1000);
    }
  },
  // 更新数据第二个流程：对state数据进行直接操作
  mutations:{
    // state就是上边的state数据，使用时调用state.count
    // INCREMENT一旦被调用就默认可以获取全部state数据
    INCREMENT(state,val){
      state.count += val;
    },
    DECREMENT(state,val){
      state.count -= val;
    },
  },

});

// 暴露出去
export default store;